<template>
  <div class="byplus">
    <!-- 泊寓ING -->
    <van-nav-bar title="泊寓故事" left-arrow @click-left="onClickLeft" class="bar" />
    <div @click="story(item.boyu_yid)" v-for="(item, index) of boyou_story" :key="index">
      <div class="f_spim">
        <span class="by_span" v-html="item.boyu_title"></span>
        <img class="by_img" :src="item.boyu_img" />
      </div>
      <div class="hr">
        <hr />
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        boyou_story: []
      };
    },
    mounted() {
      this.axios.get("/boyu/boyou").then(res => {
        this.boyou_story = res.data.results;
      });
    },
    methods: {
      story(kw) {
        this.$router.push({
          path: "/story",
          query: {
            yid: kw
          }
        });
      },
      onClickLeft() {
        this.$router.push("/");
      }
    }
  };
</script>
<style scoped>
  .byplus {
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 30px;
    margin-top: 60px;
  }

  .bar {
    width: 100%;
    height: 50px;
    position: fixed;
    top: 0;
    left: 0;
  }

  .by_span {
    font-size: 15px;
    font-weight: 600;
    flex: 0 0 68%;
    margin-top: -14px;
  }

  .f_spim {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .by_img {
    width: 80px;
    height: 85px;
    flex: 0 0 27%;
    border-radius: 5px;
  }

  hr {
    border: 1px solid #aaa;
  }
</style>